<!DOCTYPE html>
<!-- saved from url=(0058)http://webdesignerwall.com/demo/adaptive-design/final.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<!-- disable iPhone inital scale -->
<meta name="viewport" content="width=device-width; initial-scale=1.0">

<title>Demo: Adaptive Design With Media Queries</title>

<!-- main css -->
<link href="./Demo  Adaptive Design With Media Queries_files/style.css" rel="stylesheet" type="text/css">

<!-- media queries css -->
<link href="./Demo  Adaptive Design With Media Queries_files/media-queries.css" rel="stylesheet" type="text/css">

<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

</head>

<body>

<div id="pagewrap">

	<header id="header">

		<hgroup>
			<h1 id="site-logo"><a href="http://webdesignerwall.com/demo/adaptive-design/final.html#">Demo</a></h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>

		<nav>
			<ul id="main-nav" class="clearfix">
				<li><a href="http://webdesignerwall.com/">Home</a></li>
				<li><a href="http://themify.me/">Themify</a></li>
				<li><a href="http://icondock.com/">IconDock</a> </li>
				<li><a href="http://ndesign-studio.com/">N.Design</a></li>
			</ul>
			<!-- /#main-nav --> 
		</nav>

		<form id="searchform">
			<input type="search" id="s" placeholder="Search">
		</form>

	</header>
	<!-- /#header -->
	
	<div id="content">

		<article class="post clearfix">

			<header>
				<h1 class="post-title"><a href="http://webdesignerwall.com/demo/adaptive-design/final.html#">Just a Post Title</a></h1>
				<p class="post-meta"><time class="post-date" datetime="2011-05-08" pubdate="">May 8, 2011</time> <em>in</em> <a href="http://webdesignerwall.com/demo/adaptive-design/final.html#">Category</a></p>
			</header>
			<figure class="post-image"> 
				<img src="./Demo  Adaptive Design With Media Queries_files/sample-image.jpg"> 
			</figure>
			<p>Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac. Vestibulum congue nisl magna. Ut vulputate odio id dui convallis in adipiscing libero condimentum. Nunc et pharetra enim. Praesent pharetra, neque et luctus tempor, leo sapien faucibus leo, a dignissim turpis ipsum sed libero. Sed sed luctus purus. Aliquam faucibus turpis at libero consectetur euismod. Nam nunc lectus, congue non egestas quis, condimentum ut arcu. Nulla placerat, tortor non egestas rutrum, mi turpis adipiscing dui, et mollis turpis tortor vel orci. Cras a fringilla nunc. Suspendisse volutpat, eros congue scelerisque iaculis, magna odio sodales dui, vitae vulputate elit metus ac arcu. Mauris consequat rhoncus dolor id sagittis. Cras tortor elit, aliquet quis tincidunt eget, dignissim non tortor.</p>

			<h3>Vimeo Video</h3>
			<div class="video">
				<iframe src="data:text/html,chromewebdata" width="550" height="400" frameborder="0"></iframe>
			</div>
			<!-- /.video -->

			<h3>YouTube</h3>
			<div class="video">
				<object width="600" height="420">
					<param name="movie" value="http://www.youtube.com/v/NmRTreaCJXs?version=3">
					
					<param name="allowFullScreen" value="true">
					
					<param name="allowscriptaccess" value="always">
					
					<param name="wmode" value="transparent">
					
					<embed wmode="transparent" src="http://www.youtube.com/v/NmRTreaCJXs?version=3" type="application/x-shockwave-flash" width="600" height="420" allowscriptaccess="always" allowfullscreen="true">
				</object>
			</div>
			<!-- /.video -->

		</article>
		<!-- /.post -->

	</div>
	<!-- /#content --> 
	
	
	<aside id="sidebar">

		<section class="widget">
			<h4 class="widgettitle">Sidebar</h4>
			<ul>
				<li><a href="http://webdesignerwall.com/demo/adaptive-design/final.html#">WordPress</a> (3)</li>
				<li><a href="http://webdesignerwall.com/demo/adaptive-design/final.html#">Design</a> (23)</li>
				<li><a href="http://webdesignerwall.com/demo/adaptive-design/final.html#">Design </a>(18)</li>
			</ul>
		</section>
		<!-- /.widget -->

		<section class="widget clearfix">
			<h4 class="widgettitle">Flickr</h4>
			<script type="text/javascript" src="./Demo  Adaptive Design With Media Queries_files/badge_code_v2.gne"></script><div class="flickr_badge_image" id="flickr_badge_image1"><a href="http://www.flickr.com/photos/52839779@N02/4920460612/"><img src="./Demo  Adaptive Design With Media Queries_files/4920460612_f2c30bf058_s.jpg" alt="Flickr 上的一張相片" title="POGO" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image2"><a href="http://www.flickr.com/photos/52839779@N02/4920460484/"><img src="./Demo  Adaptive Design With Media Queries_files/4920460484_304bfbecd1_s.jpg" alt="Flickr 上的一張相片" title="WebDesign #136 Magazine Cover" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image3"><a href="http://www.flickr.com/photos/52839779@N02/4872829119/"><img src="./Demo  Adaptive Design With Media Queries_files/4872829119_3fb00ef561_s.jpg" alt="Flickr 上的一張相片" title="koi" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image4"><a href="http://www.flickr.com/photos/52839779@N02/4872828839/"><img src="./Demo  Adaptive Design With Media Queries_files/4872828839_5dc864f058_s.jpg" alt="Flickr 上的一張相片" title="abstract phoenix" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image5"><a href="http://www.flickr.com/photos/52839779@N02/4873437116/"><img src="./Demo  Adaptive Design With Media Queries_files/4873437116_a66ffaa9f5_s.jpg" alt="Flickr 上的一張相片" title="abstract peacock" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image6"><a href="http://www.flickr.com/photos/52839779@N02/4872827889/"><img src="./Demo  Adaptive Design With Media Queries_files/4872827889_4d79078887_s.jpg" alt="Flickr 上的一張相片" title="flow" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image7"><a href="http://www.flickr.com/photos/52839779@N02/4873436142/"><img src="./Demo  Adaptive Design With Media Queries_files/4873436142_bccfa75e57_s.jpg" alt="Flickr 上的一張相片" title="phoenix" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image8"><a href="http://www.flickr.com/photos/52839779@N02/4872827433/"><img src="./Demo  Adaptive Design With Media Queries_files/4872827433_003ef3523d_s.jpg" alt="Flickr 上的一張相片" title="bamboo" height="75" width="75"></a></div><span style="position:absolute;left:-999em;top:-999em;visibility:hidden" class="flickr_badge_beacon"><img src="./Demo  Adaptive Design With Media Queries_files/p" width="0" height="0" alt=""></span> 
		</section>
		<!-- /.widget -->
						
	</aside>
	<!-- /#sidebar -->

	<footer id="footer">
	
		<p>Tutorial by <a href="http://webdesignerwall.com/">Web Designer Wall</a></p>

	</footer>
	<!-- /#footer --> 
	
</div>
<!-- /#pagewrap -->


</body></html>